<template>
  <div class="degree-list">
    <div class="option">
      <span
        class="opt-a opt-btn btn-hover"
        @click="addReach"
      >
        添加考核项
      </span>
      <span
        round
        size="small"
        class="opt-a opt-btn btn-hover"
        @click="openDialog"
      >
        设置权重
      </span>
      <router-link
        class="opt-left opt-btn btn-hover"
        tag="span"
        :to="`/zonghe/zonghedetails/${id}#reachTable`"
      >
        返回统计表
      </router-link>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        :index="indexMethod"
        width="100"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="考核项"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="weight"
        label="权重"
      >
      </el-table-column>
      <el-table-column
        prop="subStrs"
        label="考核分项"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            @click="edit(scope.row)"
          >
            查看/修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="del(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <tipsDialog
      ref="tipsDialog"
      @sure="callBack"
    />

    <weightDialog
      ref="weightDialog"
      @refresh="getList"
    />
  </div>
</template>

<script>
import tipsDialog from "@/components/tipsDialog.vue";
import weightDialog from "./setWeightDialog.vue";
import { checkList, delCheck } from "@/api/courseReach";
export default {
  components: {
    weightDialog,
    tipsDialog,
  },
  data() {
    return {
      id: null,
      pageNum: 1,
      tableData: [],
      removeId: null,
    };
  },

  created() {
    this.id = this.$route.query.id;
    this.getList();
  },

  methods: {
    getList() {
      console.log('getlist');
      checkList({
        concludeId: this.id,
      }).then((res) => {
        this.tableData = res.data;
      });
    },
    openDialog() {
      if (this.tableData.length) {
        this.$refs.weightDialog.init(
          JSON.stringify(this.tableData, ["id", "name", "weight"])
        );
      } else {
        this.$message.error("暂无考核项设置权重！");
      }
    },
    indexMethod(index) {
      return (this.pageNum - 1) * 10 + index + 1;
    },
    del(data) {
      const { weight, id } = data;
      // if (weight && this.tableData.length > 1) {
      //   this.$refs.weightDialog.init(
      //     JSON.stringify(this.tableData, ["id", "name", "weight"]),
      //     id
      //   );
      // } else {
      //   this.removeId = id;

      //   this.$refs.tipsDialog.init({
      //     type: "error",
      //     info: "是否删除选中",
      //   });
      // }
      this.removeId = id;

        this.$refs.tipsDialog.init({
          type: "error",
          info: "是否删除选中",
        });
    },

    edit(data) {
      const { id, concludeId } = data;
      this.$router.push({
        name: "SetReach",
        query: { id, cid: concludeId },
      });
    },

    addReach() {
      if (this.tableData.length == 10) {
        this.$message.warning("考核项最多10条！");
        return false;
      }

      this.$router.push({
        name: "SetReach",
        query: { cid: this.id },
      });
    },

    callBack() {
      delCheck({ id: this.removeId }).then((res) => {
        this.getList();
      });
    },
  },
};
</script>

<style lang="scss">
.degree-list {
  .el-table__body tr:hover > td {
    background-color: #f0f8ff !important;
  }

  .el-table__body tr.current-row > td {
    background-color: #f0f8ff !important;
  }
  .el-button--text {
    span:hover {
      color: #1277eb !important;
    }
  }
}
</style>

<style lang="scss" scoped>
a {
  text-decoration: none;
}
.degree-list {
  margin: 0 auto 30px auto;
  min-height: 400px;
  box-sizing: border-box;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
  background: #fff;
  padding: 40px 41px 40px;
  border-radius: 0 0 5px 5px;
  .option {
    text-align: right;
    margin-bottom: 20px;

    .opt-btn {
      color: #1277eb;
      font-size: 14px;
      font-weight: 400;
      border-color: #1277eb;
      padding: 5px 19px;
    }

    .opt-a {
      box-sizing: border-box;
      border-radius: 20px;
      border: 1px solid #1277eb;
      display: inline-block;
      margin-right: 10px;
      cursor: pointer;
      vertical-align: middle;
    }

    .opt-left {
      box-sizing: border-box;
      border-radius: 20px;
      border: 1px solid #1277eb;
      display: inline-block;
      margin-left: 10px;
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .btn-hover:hover {
    background: #1277eb;
    color: #fff;
  }
}
</style>
